<template>
	<view class="s_container">
		<view class="my_box">
			<view class="my_box_box">
				<view class="my_box_top" @click="fixedAvatar">
					<view class="avatoa">
						<text class="my_txt">头像</text>
					</view>
					<view class="icon_right">
						<view class="my_txt mytxt">
							<image mode="scaleToFill" v-if="imagePath == ''" :src="`/static/images/me/header.png`"
								class="m_img"></image>
							<image mode="scaleToFill" v-if="imagePath != ''" :src="`${imageUrl}${imagePath}`"
								class="m_img"></image>
						</view>
						<view class="my_txt mytxt">
							<image class="arrow_icon" src="/static/images/me/to_right_icon.png" mode="scaleToFill">
							</image>
						</view>
					</view>
				</view>
				<view class="my_box_top" v-for="(item, index) in btnList" :key="index" @click="jumpSwitch(item)">
					<view class="avatoa">
						<text class="my_txt">{{item.btnName}}</text>
					</view>
					<view class="icon_right">
						<view class="my_txt mytxt">
							<image class="arrow_icon" src="/static/images/me/to_right_icon.png" mode="scaleToFill">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my_box">
			<view class="my_box_box">
				<view class="my_box_top" style="justify-content: center;" @click="jumpSwitch({btnName: '退出登录'})">
					<view class="avatoa">
						<text class="my_txt">退出登录</text>
					</view>
				</view>
				<view class="my_box_top" style="justify-content: center;" @click="jumpSwitch({btnName: '注销账号'})">
					<view class="avatoa">
						<text class="my_txt">注销账号</text>
					</view>
				</view>
			</view>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()'
			okCor='#e74c3c' :okBtn='okBtn'></mcModal>
	</view>
</template>

<script>
	import {
		imgURL,
		requestURL
	} from '../../common/utils/config.js';
	import {
		logout
	} from '../../common/api/index.js';
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	import {
		DeleteUser
	} from '../../common/api/blank.js';
	export default {
		onLoad: function(option) {
			this.loginFlag = option.loginFlag
			this.imagePath = option.imagePath
			this.mobileNo = option.mobileNo
		},
		components: {
			mcModal
		},
		data() {
			return {
				imagePath: '',
				loginFlag: false,
				mobileNo: '',
				imgUrls: `${imgURL}/mini_image_file/`,
				imageUrl: `${requestURL}/ecm/api/app/pic/`,
				showMcModal: false,
				title: '',
				content: '',
				okBtn: '',
				btnList: [{
						btnName: '支付密码管理',
						url: './payManage'
					},
					{
						btnName: '登录密码重置',
						url: '../login/fixedPass'
					},
					{
						btnName: '更换手机号',
						url: './fixMobile'
					},
					// { btnName: '关于我们', url: './aboutUs' },
				]
			}
		},
		methods: {
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				logout({
					userId: uni.getStorageSync('s_userId')
				}).then(res => {
					if (res.resultCode == 0) {
						uni.showToast({
							title: '退出成功~'
						})
						uni.removeStorage({
							key: 's_login'
						})
						uni.removeStorage({
							key: 's_userId'
						})
						uni.removeStorage({
							key: 'realname'
						})
						uni.removeStorage({
							key: 'idCard'
						})
						uni.removeStorage({
							key: 's_mobile',
							success: (res) => {
								uni.reLaunch({
									url: '/pages/me/me'
								})
							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			fixedAvatar() {
				uni.navigateTo({
					url: './fixAvator?imagePath=' + this.imagePath
				})
			},
			jumpSwitch(item) {
				if (item.btnName == '退出登录') {
					this.jumpLogout()
				} else if (item.btnName == '注销账号') {
					uni.navigateTo({
						url:"/pageBlank/components/certificate"
					})
				} else {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			jumpLogout() {
				this.title = '温馨提示'
				this.content = '退出登录将无法使用大部分功能，确定要退出吗？'
				this.okBtn = '继续退出'
				this.showMcModal = true
			}
		}
	}
</script>

<style lang="scss">
	.s_container {
		height: 100vh;
		background-color: rgb(243, 243, 243);
		overflow: hidden;
	}

	.m_img {
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
	}

	.my_box {
		margin-top: 16rpx;
	}

	.icon_right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.my_box_box {
		display: flex;
		flex-direction: column;
	}

	.my_box_top {
		min-height: 106rpx;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		position: relative;

		&::after {
			content: "";
			height: 1px;
			transform: scaleY(.5);
			background: #E6E6E6;
			position: absolute;
			right: 0;
			bottom: 0;
			left: 32rpx;
		}

		&:last-child::after {
			height: 0;
		}
	}

	.avatoa {
		display: flex;
		align-items: center;
	}

	.imgava {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.my_txt {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 30rpx;
		color: #000000;
	}

	.mytxt {
		color: rgb(199, 199, 204);
		line-height: 0;
	}

	.arrow_icon {
		display: inline-block;
		width: 48rpx;
		height: 48rpx;
	}

	.s_img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}
</style>
